<template>
  <div class="screen" id="screen">
    <screen-header></screen-header>
    <screen-area :activeKey.sync="menuKey"/>
    <screen-left />
    <screen-right />

    <div class="screen-main">
      <screen-bg v-if="menuKey === 'all'" @area-click="onAreaClick" />
      <screen-map v-else :menuKey="menuKey"/>
    </div>
  </div>
</template>

<script>
import screenHeader from '@/comp/screen/head/screen-header'
// import screenLeft from '@/comp/screen/screen-left'
import screenLeft from '@/comp/screen/screen-left2'
import screenArea from '@/comp/screen/screen-area'
import screenRight from '@/comp/screen/screen-right'
import screenBg from '@/comp/screen/screen-main/screen-bg'
import screenMap from '@/comp/screen/screen-map/screen-map'


import { resize } from '@/helper/screen-tool'

export default {
  name: 'screen',
  cnName: '大屏',
  components: {
    screenHeader,
    screenLeft,
    screenArea,
    screenRight,
    screenBg,
    screenMap
  },
  data() {
    return {
      menuKey: 'all'
    }
  },
  methods: {
    onAreaClick(key) {
      this.menuKey = key
    }
  },
  mounted() {
    // window.addEventListener('resize', function() {
    //   resize('#screen')
    // })
    // resize('#screen')
  }
}
</script>

<style lang="scss" scoped>
.screen {
  position: absolute;
  background-image: url("~@/assets/screen/bg.jpg");
  background-size: 100% 100%;
  color: #FFF;
  width: 100%;
  height: 100%;

 /*
  width: 1920px;
  height: 1080px;
  left: 50%;
  top: 50%;
  transform-origin: 0 0;*/

  ::-webkit-scrollbar {
    width: 0px;
  }

  ::-webkit-scrollbar-track {
    background-color: #000;
  }

  ::-webkit-scrollbar-thumb {
    background-color: rgba(128,164,225, .7);
    border-radius: 3px;
  }

  &-main {
    position: absolute;
    z-index: 0;
    width: 100%;
    height: 100%;
  }
}
</style>
